<template>
  <div class="userMain-container">
    <div class="tag-container">
      <!-- 添加事件在鼠标移入移出时改变tag图标的展示状态 -->
      <div
        class="tag-nav"
        @mouseenter="handleTagNavMouseEnter"
        @mouseleave="handleTagNavMouseLeave"
        ref="tagNav"
      >
        <!-- overflow:hidden -->
        <div class="tags">
          <!-- 设置布局让li每次从左开始，换行，同时保证li的margin能正常设置 -->
          <ul class="active" v-if="isTagNavShow">
            <li v-for="(item, index) in tags" :key="index" class="tag-item">
              <!-- 去掉下划线 -->
              <a
                v-text="item.tagName"
                style="text-decoration: none"
                @click="goSearch(item)"
              ></a>
            </li>
          </ul>
        </div>
        <img
          v-if="!isTagNavDown"
          class="tag-down"
          Z
          src="../../assets/images/userMain/tag-下拉菜单.png"
          alt=""
          style="width: 32px; height: auto"
        />
        <img
          v-if="isTagNavDown"
          class="tag-up"
          src="../../assets/images/userMain/tag-上拉菜单.png"
          alt=""
          style="width: 32px; height: auto"
        />
      </div>
    </div>
    <div class="rank-container">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="like-rank-container">
            <el-card class="like-rank-card" shadow="hover">
              <!-- 设置card header部分 -->
              <div class="clearfix" slot="header">
                <div style="display: flex; align-items: center">
                  <img
                    src="../../assets/images/userMain/like.png"
                    style="height: 18px; margin-right: 8px"
                  />
                  <p>点赞排行榜</p>
                  <!-- 修改填充色和边框 -->
                  <el-radio-group
                    v-model="likeRankRadio"
                    size="mini"
                    fill="#83C0FF"
                    style="margin-left: 50px"
                    @input="handleLikeRankRadioChange"
                  >
                    <el-radio-button label="0">近一周</el-radio-button>
                    <el-radio-button label="1">近一月</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <!-- 数据未加载完成之前显示骨架屏,throttle是节流设置骨架屏的渲染时机 -->
              <el-skeleton
                :loading="!isLikeRankShow"
                style="width: 100%; height: 100%"
                :rows="5"
                :throttle="elSkeletonDelay"
              />
              <!-- 展示排行榜序号和链接,控制显示时机需要在数据全部加载完成之后再显示 -->
              <div class="like-rank-content" v-if="isLikeRankShow">
                <div
                  class="like-item"
                  v-for="(item, index) in likeRankDataList"
                  :key="index"
                >
                  <div class="item-container" style="display: flex">
                    <!-- 排行榜的序号,前三个设置不同颜色 -->
                    <p
                      class="like-item-index"
                      :style="{ color: rankIndexColor[index] }"
                    >
                      {{ index + 1 }}
                    </p>
                    <div class="item-content">
                      <!-- 文章的标题,新的标签页打开 -->
                      <a
                        @click="goBlogDetail(item)"
                        target="_blank"
                        class="link-rank-title"
                        >{{ item.title }}</a
                      >
                      <!-- 文章内容截取一部分展示 -->
                      <a target="_blank" @click="goBlogDetail(item)">
                        <p class="text-sub-content">
                          {{ item.partContent }}
                        </p>
                      </a>
                    </div>
                  </div>
                  <!-- 分割线 -->
                  <el-divider></el-divider>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="carousel-container">
            <el-card class="carousel-card" shadow="hover">
              <!-- 图片渲染较慢设置骨架屏 -->
              <!-- 延迟占位dom的渲染时间（当数据返回特别快时）避免用户屏幕闪 -->
              <el-skeleton
                :loading="!isCarouselShow"
                :rows="6"
                animated
                style="width: 100%; height: 100%"
              >
              </el-skeleton>
              <!-- 走马灯设置click触发器，切换时间间隔,设置走马灯高度 -->
              <el-carousel
                trigger="click"
                :interval="10000"
                height="360px"
                v-if="isCarouselShow"
              >
                <el-carousel-item
                  v-for="(item, index) in carouselImgList"
                  :key="index"
                >
                  <div class="carousel-item-content">
                    <img :src="item.imgUrl" alt="" class="carousel-image" />
                    <span class="carousel-text">{{ item.imgText }}</span>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="hot-rank-container">
            <el-card class="hot-rank-card" shadow="hover">
              <!-- 设置card header部分 -->
              <div class="clearfix" slot="header">
                <div style="display: flex; align-items: center">
                  <img
                    src="../../assets/images/userMain/hot.png"
                    style="height: 18px; margin-right: 8px"
                  />
                  <p>热门排行榜</p>
                  <!-- 默认展示近一周的设置默认聚焦 -->
                  <el-radio-group
                    v-model="hotRankRadio"
                    size="mini"
                    fill="#83C0FF"
                    style="margin-left: 50px"
                    @input="handleHotRankRadioChange"
                  >
                    <el-radio-button label="0">近一周</el-radio-button>
                    <el-radio-button label="1">近一月</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <!-- 骨架屏 -->
              <el-skeleton
                :loading="!isHotRankShow"
                style="width: 100%; height: 100%"
                :rows="5"
                :throttle="elSkeletonDelay"
              />
              <!-- 展示排行榜序号和链接,数据加载完整之后才进行渲染 -->
              <div class="hot-rank-content" v-if="isHotRankShow">
                <div
                  class="hot-item"
                  v-for="(item, index) in hotRankDataList"
                  :key="index"
                >
                  <div class="item-container" style="display: flex">
                    <!-- 排行榜的序号 -->
                    <p
                      class="hot-item-index"
                      :style="{ color: rankIndexColor[index] }"
                    >
                      {{ index + 1 }}
                    </p>
                    <div class="item-content">
                      <a
                        target="_blank"
                        class="link-rank-title"
                        @click="goBlogDetail(item)"
                        >{{ item.title }}</a
                      >
                      <a target="_blank" @click="goBlogDetail(item)">
                        <p class="text-sub-content">
                          {{ item.partContent }}
                        </p>
                      </a>
                    </div>
                  </div>
                  <!-- 分割线 -->
                  <el-divider></el-divider>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 无限滚动的博文推荐，默认初始推荐数目是10个 -->
    <div class="recommend-container">
      <el-tabs
        type="border-card"
        v-model="recommendTab"
        class="recommend-container-tabs"
      >
        <!-- 展示内容：1.用户选着了感兴趣的标签，按照时间顺序查询标签型更新的内容(这样弊端是可能有的标签一篇都没有)
          2.用户没有选择感兴趣的标签，直接按照时间顺序推荐新的文章
          3.优化的文章推荐方式,在每一次推荐的时候每一个标签都推荐一定的数目，如果没有就不推荐 -->
        <el-tab-pane label="像你推荐" name="1">
          <span slot="label" style="display: flex; align-items: center"
            ><img
              src="../../assets/images/userMain/爱心.png"
              style="height: 18px; margin-right: 8px"
            />向你推荐</span
          >
          <!-- 将数据传入博客列表 -->
          <blog-list :blogLists="recommendArticleList"></blog-list>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="my-loading-container">
      <div class="loading-content">
        <div class="dots-container" v-show="isLoadingActive">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
    <!-- <div class="footer" style="border: 1px solid red"></div> -->
    <!-- 回到顶部的按钮,设置至少滚400px可见 -->
    <el-backtop :visibility-height="800" :right="40" :bottom="20"> </el-backtop>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from "vue-property-decorator";
import blogList from "./components/blogList.vue";
import {
  getAllTags,
  getLikeRankData,
  getHotRankData,
  getArticleList,
} from "@/apis/apis";

@Component({
  name: "userMain",
  components: {
    blogList,
  },
})
export default class userMain extends Vue {
  image1: string = require("../../assets/images/userMain/落叶.jpg");
  image2: string = require("../../assets/images/userMain/灯火.jpg");
  image3: string = require("../../assets/images/userMain/山峰.jpg");
  image4: string = require("../../assets/images/userMain/乐器.jpg");
  // 页面挂载时请求数据
  mounted() {
    // 强制刷新页面一次页面添加sessionStorage
    if (window.location.href.indexOf("#reloaded") == -1) {
      window.location.href = window.location.href + "#reloaded";
      window.location.reload();
    }

    this.getUserMainAllTags();
    this.getLikeRankDatas();
    this.getHotRankDatas();
    this.getUserMainCarouselContent();
    // 初始时加载10条推荐的博文
    this.getRecommendArticleList();
    // 使用计算属性获取对象并设置监听对象
    this.observer.observe(document.querySelector(".my-loading-container")!);
  }

  // 部分骨架屏的延迟时间
  elSkeletonDelay: number = 3000;
  // 注意元素进入和离开时都会触发，需要设置一个标志位
  isLoadingActive: Boolean = false;
  // 判断是否正在进行推荐列表数据的请求，初始一开始在mounted中进行数据请求
  isRecommendRequesting: Boolean = true;
  // 通过IntersectionObserver api实现无限滚动
  // 定义 observer 函数
  get observer() {
    const _this = this;
    return new IntersectionObserver(
      (entries) => {
        // entries是所有被监听对象的集合
        if (entries[0].isIntersecting) {
          _this.isLoadingActive = true;
          // 数据请求的条件：只有在显示加载动画同时此前没有进行请求的时候才进行数据请求
          if (_this.isLoadingActive && !_this.isRecommendRequesting) {
            _this.getRecommendArticleList();
          }
          // console.log(_this.isLoadingActive);
        } else {
          _this.isLoadingActive = false;
          // console.log(_this.isLoadingActive);
        }
      },
      {
        // root: null,目标元素和视口的交叉情况0-1
        root: null,
        threshold: 1,
      }
    );
  }

  //   tag标签的展示状态
  isTagNavDown: boolean = false;
  // 标签文字的渲染时机
  isTagNavShow: boolean = false;
  //   存放所有的tag标签
  tags: Array<{ tagName: string; tagId: number }> = [];
  // 处理鼠标移入tag标签时的事件
  handleTagNavMouseEnter() {
    this.isTagNavDown = true;
    // 获取当前元素
    const tagNav = this.$refs.tagNav as HTMLElement;
    // 先将元素的高度设置为auto，获取元素的高度
    tagNav.style.height = "auto";
    // 获取元素展开时的高度，两种方法都可以
    const tagsNavHeight = tagNav.offsetHeight;
    // const {height} = tagNav.getBoundingClientRect();
    // 再把元素的高度设置为初始值68(一行最小68px)，浏览器来不及渲染，所以不会变化
    tagNav.style.height = "68px";
    // 过渡动画
    tagNav.style.transition = "height 0.4s ease-in-out 0s";
    // 避免直接渲染下面的高度需要执行一个延迟操作，随便读一个元素的属性
    tagNav.offsetHeight;
    tagNav.style.height = tagsNavHeight + "px";
  }
  // 处理鼠标移出tag标签时的事件
  handleTagNavMouseLeave() {
    this.isTagNavDown = false;
    // 获取当前元素
    const tagNav = this.$refs.tagNav as HTMLElement;
    // 设置元素高度为初始化的68px
    tagNav.style.height = "68px";
    // 执行动画
    tagNav.style.transition = "height 0.4s ease-in-out 0s";
  }
  // 排行榜前三序号数字的颜色
  rankIndexColor: Array<string> = [
    "#ce0202",
    "#ea3535",
    "#f44336",
    "#303031",
    "#303031",
  ];
  // 点赞排行榜的数据
  likeRankDataList: Array<{
    id: number;
    title: string;
    partContent: string;
    viewCounts?: number;
    likeCounts?: number;
    commendCounts?: number;
  }> = [];
  // 控制排行榜显示时机
  isLikeRankShow: boolean = false;
  // 排行榜的数据的条数
  likeRankDataNum: number = 0;
  //热门排行榜的数据
  hotRankDataList: Array<{
    id: string;
    title: string;
    partContent: string;
    viewCounts?: number;
    likeCounts?: number;
    commendCounts?: number;
  }> = [];
  isHotRankShow: boolean = false;
  hotRankDataNum: number = 0;
  // ！TODO:点击标签检索对应标签的文章，跳转到高级检索检索对应的标签
  // 检索中检索对应的标签的内容，标签页跳转传参
  goSearch(tag: any) {
    const route = this.$router.resolve({
      name: "advancedSearch",
      query: {
        tagId: tag.tagId,
        tagName: tag.tagName,
      },
    });
    window.open(route.href, "_blank");
  }
  //  打开新的标签页,传输文章id
  goBlogDetail(item: any) {
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: item.id,
      },
    });
    window.open(route.href, "_blank");
  }
  //  点赞排行榜的radio
  likeRankRadio: string = "0";
  // 更换选中的radio时重新请求数据
  handleLikeRankRadioChange(): void {
    // 重新获取新的点赞排行榜数据
    this.getLikeRankDatas();
  }
  // 热门排行榜的radio
  hotRankRadio: string = "0";
  // 更换选中的radio时重新请求数据
  handleHotRankRadioChange(): void {
    // 重新获取新的热门排行榜数据
    this.getHotRankDatas();
  }
  // 1.获取所有的tag标签--->success
  getUserMainAllTags() {
    getAllTags()
      .then((res: any) => {
        // console.log(res);
        let resTags = res.data.data;
        // 将检索到的标签按照tagId排序
        resTags.sort((a: any, b: any) => a.tagId - b.tagId);
        // 将resTag的内容添加的tags中
        resTags.forEach((item: any) => {
          this.tags.push({ tagId: item.tagId, tagName: item.tagName });
        });
        // TagNav开始渲染文字
        this.isTagNavShow = true;
      })
      .catch((err: any) => {
        console.log("this is error from userMain getAllTags");
        console.log(err);
      });
  }
  // 2.获取点赞排行榜的数据--》success
  getLikeRankDatas(): void {
    getLikeRankData(parseInt(this.likeRankRadio))
      .then((res: any) => {
        let resLikeRankData = res.data.data;
        // 只加载数据的前五条，如果少于五条则全部加载
        let len = resLikeRankData.length > 5 ? 5 : resLikeRankData.length;
        // 设置排行榜显示数据的个数
        this.likeRankDataNum = len;
        // 每次获取数据之前先清空之前的数据,防止内存泄漏
        this.likeRankDataList.length = 0;
        // 标题和内容都需要截取部分展示
        for (let i = 0; i < len; i++) {
          this.likeRankDataList.push({
            id: resLikeRankData[i].knowledgeId,
            title: resLikeRankData[i].title.slice(0, 15) as string,
            partContent: resLikeRankData[i].content.slice(0, 20) + "...",
          });
        }
        // 设置排行榜显示
        this.isLikeRankShow = true;
      })
      .catch((err: any) => {
        console.log("this is error from userMain getLikeRankData");
        console.log(err);
      });
  }
  // 获取热门排行榜的数据-->success
  getHotRankDatas(): void {
    getHotRankData(parseInt(this.hotRankRadio))
      .then((res: any) => {
        // console.log(res);
        let resHotRankData = res.data.data;
        let len = resHotRankData.length > 5 ? 5 : resHotRankData.length;
        this.hotRankDataNum = len;
        this.hotRankDataList.length = 0;
        for (let i = 0; i < len; i++) {
          this.hotRankDataList.push({
            id: resHotRankData[i].knowledgeId as string,
            title: resHotRankData[i].title.slice(0, 15) as string,
            partContent: resHotRankData[i].content.slice(0, 20) + "...",
          });
        }
        this.isHotRankShow = true;
      })
      .catch((err: any) => {
        console.log("this is error from userMain getHotRankData");
        console.log(err);
      });
  }
  // 轮播图的数据
  carouselImgList: Array<{ id: number; imgUrl: string; imgText: string }> = [];
  // 控制轮播图的显示时机
  isCarouselShow: boolean = false;
  // 获取首页轮播图的数据
  getUserMainCarouselContent(): void {
    this.carouselImgList.length = 0;
    let imageUrls = [this.image1, this.image2, this.image3, this.image4];
    let imageTexts = [
      "千山落叶岩岩瘦，百尺危阑寸寸愁",
      "客亭临小市,灯火夜妆明",
      "山花落尽山长在，山水空流山自闲",
      "昆山玉碎凤凰叫，芙蓉泣露香兰笑",
    ];
    for (let i = 0; i < imageUrls.length; i++) {
      this.carouselImgList.push({
        id: i,
        imgUrl: imageUrls[i],
        imgText: imageTexts[i],
      });
    }
    // 设置轮播图显示
    setTimeout(() => {
      this.isCarouselShow = true;
    }, 1000);
  }
  // 推荐的博文列表tabs序号
  recommendTab: string = "1";
  // 存储推荐的博文列表
  recommendArticleList: Array<{
    knowledgeId: number;
    title: string;
    content: string;
    viewCounts?: number;
    collectCounts?: number;
    likeCounts?: number;
    commentCounts?: number;
    author?: string;
    publishTime?: string;
  }> = [];
  // 获取推荐的博文列表
  // 需要传递页码和页数
  pageSize: number = 10;
  currentPageNum: number = 1;

  getRecommendArticleList(): void {
    // 设置正在请求的标志位
    this.isRecommendRequesting = true;
    getArticleList(this.pageSize, this.currentPageNum)
      .then((res: any) => {
        // console.log(res);
        let resRecommendArticleList = res.data.data;
        resRecommendArticleList.forEach((item: any) => {
          // 文章的内容截取一部分展示最多展示两行，一般100-150个字符，后端处理
          this.recommendArticleList.push({
            knowledgeId: item.knowledgeId as number,
            title: item.title as string,
            content: item.content as string,
            viewCounts: (item.viewCounts as number) || 0,
            collectCounts: (item.collectCounts as number) || 0,
            likeCounts: (item.likeCounts as number) || 0,
            commentCounts: (item.commentCounts as number) || 0,
            author: item.nickName as string,
            publishTime: item.createTime as string,
          });
        });
        // 在数据请求完成之后设置标志位（只能在这里设置，因为是异步请求）
        this.isRecommendRequesting = false;
        // 更新当前页码
        this.currentPageNum++;
      })
      .catch((err: any) => {
        console.log("this is error from userMain getRecommendArticleList");
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/themes.scss";
$container-margin-bottom: 10px;
$container-width: 1320px;
.userMain-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: $container-width;
  margin: 10px auto 0px auto;
  padding: 0px 10px;
  position: relative;
  .tag-container {
    width: $container-width;
    margin-bottom: $container-margin-bottom;
    // border: 1px solid gray;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1),
      0px -3px 5px 0px rgba(0, 0, 0, 0.05);
    background-color: white;
    border-radius: 3px;
    position: absolute;
    // TODO:设置z-index使得tag标签悬浮在其他元素之上
    z-index: 999;
    @include useTheme {
      background-color: getVar("divColor");
      color: getVar("textColor");
    }
    .tag-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 68px;

      // 一种较好的解决方法使用flip思想，使用js实现动画效果
      //   为下面悬浮设置过渡,需要变化的属性、过渡时间、过渡方式、延迟时间,多个使用逗号隔开
      .tags {
        width: 100%;
        padding: 20px 20px 0px 20px;
        box-sizing: border-box;
        // border: 1px solid blue;
        overflow: hidden;
        .active {
          display: flex;
          flex-wrap: wrap;
          justify-content: left;
          .tag-item {
            display: inline;
            font-size: 16px;
            margin: 0px 15px 15px 15px;
            a {
              &:hover {
                color: #343843;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
  .rank-container {
    width: $container-width;
    height: auto;
    // 设置固定高度，子元素继承父元素高度
    margin-top: 80px;
    margin-bottom: $container-margin-bottom;

    .like-rank-container {
      height: 380px;
      .like-rank-card {
        height: 100%;
        ::v-deep(.el-card__header) {
          padding: 10px 15px;
        }
        ::v-deep(.el-card__body) {
          padding: 15px;
        }
        @include useTheme {
          background-color: getVar("divColor");
          color: getVar("textColor");
        }
        .like-rank-content {
          .like-item {
            ::v-deep(.el-divider) {
              margin: 10px;
              // 默认是100%，需要设置为auto,防止超出
              width: auto;
            }
            .item-container {
              display: flex;

              .like-item-index {
                font-size: large;
                font-weight: 600;
                margin-right: 10px;
              }
              .item-content {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .link-rank-title {
                  font-size: 16px;
                  &:hover {
                    text-decoration: underline;
                  }
                }
                a {
                  .text-sub-content {
                    font-size: 13px;
                    color: #b3b3b3;
                  }
                }
              }
            }
          }
        }
      }
    }
    .hot-rank-container {
      height: 380px;
      .hot-rank-card {
        height: 100%;
        @include useTheme {
          background-color: getVar("divColor");
          color: getVar("textColor");
        }
        ::v-deep(.el-card__header) {
          padding: 10px 15px;
        }
        ::v-deep(.el-card__body) {
          padding: 15px;
        }
        .hot-rank-content {
          .hot-item {
            ::v-deep(.el-divider) {
              margin: 10px;
              // 默认是100%，需要设置为auto,防止超出
              width: auto;
            }
            .item-container {
              display: flex;
              .hot-item-index {
                font-size: large;
                font-weight: 600;
                margin-right: 10px;
              }
              .item-content {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .link-rank-title {
                  font-size: 16px;
                  &:hover {
                    text-decoration: underline;
                  }
                }
                a {
                  .text-sub-content {
                    font-size: 13px;
                    color: #b3b3b3;
                  }
                }
              }
            }
          }
        }
      }
    }
    .carousel-container {
      height: 380px;
      .carousel-card {
        height: 100%;
        @include useTheme {
          background-color: getVar("divColor");
          color: getVar("textColor");
        }
        ::v-deep(.el-card__body) {
          padding: 10px;
        }
        .carousel-item-content {
          position: relative;

          .carousel-image {
            width: 100%;
            height: 100%;
            // 不保证图片原有的宽高比例，但填充整个容器，会拉伸图片
            object-fit: fill;
          }
          .carousel-text {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgb(233, 238, 248);
            font-size: large;
          }
        }
      }
    }
  }
  .recommend-container {
    width: $container-width;
    margin-bottom: $container-margin-bottom;
    .recommend-container-tabs {
      ::v-deep(.el-tabs__content) {
        @include useTheme {
          background-color: getVar("divColor");
          color: getVar("textColor");
        }
      }
    }
  }
  .my-loading-container {
    width: 300px;
    height: 80px;
    margin-bottom: 20px;
    .loading-content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .dots-container {
        display: flex;
        justify-content: center;
        align-items: center;
        .dot {
          width: 20px;
          height: 20px;
          margin-right: 10px;
          border-radius: 50%;
          background-color: #b3d4fc;
          animation: pulse 2s infinite ease-in-out;
          &:last-child {
            margin-right: 0px;
          }
          &:nth-child(1) {
            animation-delay: -0.3s;
          }
          &:nth-child(2) {
            animation-delay: -0.1s;
          }
          &:nth-child(3) {
            animation-delay: 0.1s;
          }
          @keyframes pulse {
            0% {
              transform: scale(0.8);
              background-color: #b3d4fc;
              box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
            }

            50% {
              transform: scale(1.2);
              background-color: #6793fb;
              box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
            }

            100% {
              transform: scale(0.8);
              background-color: #b3d4fc;
              box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
            }
          }
        }
      }
    }
  }
  //   .footer {
  //     width: 1360px;
  //     height: 100px;
  //   }
}
</style>